<!--  -->
<template>
  <div>
    <div class="notice-u"><i class="el-icon-warning"></i> 说明：选择官方的模板后会对当前站点的语言版本<span style="color: red;font-weight: bolder;">数据进行覆盖，无法恢复</span>！</div>
    <div class="templateBox-u">
      <div class="tempalte-filter-u">
        <el-input v-model="templateName" placeholder="模板编号" size="mini"
            style="width: 180px;"></el-input>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="chooseTemplateModel" placeholder="选择模板类型" style="width: 180px;" size="mini">
          <el-option :label="'全部'" :value="-1">
          </el-option>
          <el-option v-for="item in templateModeles" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchTemplate()">搜索</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span>没有适合的模板？</span>
        <span class="color-main" @click="templateFeedback">点击反馈</span>
      </div>
      <div class="template-list-u" :class="isdrawer ? 'template-list-drawer-u' : ''">
        <div v-if="templates.length < 1" class="no-data">暂无数据</div>
        <div v-else>
          <div class="templateList-box-u" :class="isdrawer ? 'templateList-box-drawer-u' : ''">
          <el-scrollbar style="height: 100%;">
            <div class="templateList-u" v-loading="loading">
              <ul class="clearfix">
                <li v-for="item in templates" :key="item.templateId">
                  <div class="item">
                    <el-image :src="item.pcimage" :fit="'scale-down'" class="img">
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                      <div slot="error" class="image-slot">
                        <img :src="iEmpty" alt="">
                      </div>
                    </el-image>
                    <div class="info">
                      <div class="name" :title="'编号：' + item.templateName"><span>编号：</span>{{item.templateName}}</div>
                    </div>
                    <div class="opt clearfix">
                      <div class="choose">
                        <el-button type="primary" size="mini" :disabled="disChoose === item.templateId"
                          @click="chooseTemplate(item.templateId)">选择
                        </el-button>
                      </div>
                      <div class="view" v-if="!isAgent">
                        <el-button size="mini" @click="viewTemplate(item.templateId)">浏览</el-button>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </el-scrollbar>
          </div>
          <div class="pagination">
            <el-pagination @current-change="changePage" layout="prev, pager, next" :current-page="pageNumber"
              :page-size="12" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <EditorTemplateFeedback ref="templateFeedback"/>
  </div>
</template>

<script>
import ImagesEmpty from '@/assets/images/image-empty.png'
import EditorTemplateFeedback from '@/components/common/design/dialog/templateTheme/dialog/EditorTemplateFeedback'
import { mapState, mapGetters } from 'vuex'
import * as functions from '@/core/functions.js'
import _ from 'lodash'
export default {
  props: {
    dialogClose: {
      type: Function
    },
    isdrawer: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: true,
      iEmpty: ImagesEmpty,
      // 模板列表
      templates: [],
      // 模板类型列表
      templateModeles: [],
      // 当前主题
      currentTemplate: null,
      // 数据库中的主题
      dtemplate: null,
      // 搜索input
      templateName: '',
      chooseTemplateModel: -1,
      // 当前页
      pageNumber: 1,
      total: 0,
      // 禁止再次点击
      disChoose: null,
      isAgent: false
    }
  },
  computed: {
    ...mapState([
      'design'
    ]),
    ...mapGetters([
      'currentSite'
    ])
  },
  created () {
    functions.agentInfo().then(agent => {
      if (parseInt(agent.loginAgentDomain) === 1) {
        this.isAgent = true
      } else {
        this.isAgent = false
      }
    })
    // 获取所有的模板类型数据
    this.$post('/template/model-infos', null).then(response => {
      if (response && response.length > 0) {
        this.templateModeles = response
      } else {
        this.templateModeles = []
      }
    })
    this.init()
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  methods: {
    init () {
      this.chooseTemplateModel = -1
      this.templateName = ''
      this.pageNumber = 1
      this.disChoose = null
      this.getData()
    },
    searchTemplate () {
      this.pageNumber = 1
      this.getData()
    },
    changePage (pag) {
      this.pageNumber = pag
      this.getData()
    },
    viewTemplate (templateId) {
      let template = this.templates.find(item => {
        return parseInt(item.templateId) === parseInt(templateId)
      })
      if (template && template.templateUrl) {
        window.open(template.templateUrl)
      }
    },
    chooseTemplate (templateId) {
      let template = this.templates.find(item => {
        return parseInt(item.templateId) === parseInt(templateId)
      })
      if (!template) {
        return
      }
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        type: 'warning',
        message: h('div', null, [
          h('p', null, [
            h('span', null, '选择此模板后，' + this.currentSite.language.name + '版数据将被 '),
            h('span', { style: 'color: red;font-weight:bold;' }, '覆盖，无法恢复'),
            h('span', null, ' , 是否继续?')
          ]),
          h('p', null, [
            h('span', null, '模板使用的图片均 '),
            h('span', { style: 'color: red;font-weight:bold;' }, '不可商用'),
            h('span', null, ' ，请选择模板后尽快替换。', '提示')
          ])
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'msgboxx'
      }).then(action => {
        this.disChoose = templateId
        this.$post('/template/init', {
          templateId: templateId
        }).then(response => {
          // 获取到正在初始化的 s_config 的数据信息后通过改变 vuex 的状态，同时加入定时器，通过定时器校验状态是否改变回来
          if (response && response.id) {
            this.$store.dispatch('siteConfigChange', _.cloneDeep(response))
            this.close()
            this.disChoose = null
          }
        })
      }).catch(() => {
      })
    },
    // 获取模板列表数据
    getData (callback) {
      this.loading = true
      this.$post('/template/infos', {
        templatename: this.templateName,
        typeId: this.chooseTemplateModel,
        page: this.pageNumber,
        size: 12
      }).then(response => {
        if (response && response.total && parseInt(response.total) > 0) {
          this.total = response.total
          this.templates = response.rows
        } else {
          this.total = 0
          this.templates = []
        }
        if (typeof callback === 'function') {
          callback()
        }
        this.loading = false
      })
    },
    close () {
      this.loading = false
      this.templates = []
      this.currentTemplate = null
      this.dialogClose()
    },
    templateFeedback () {
      this.$refs['templateFeedback'].show()
    }
  },
  components: {
    EditorTemplateFeedback
  }
}

</script>

<style scoped lang="scss">
.templateBox-u .tempalte-filter-u {
  margin-bottom: 15px;
  color: #666;
}
.template-list-u{
  height: 380px;
  position: relative;
  padding-bottom: 30px;
}
.template-list-drawer-u{
  height: calc(100vh - 205px);
}
.no-data{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #888888;
  min-height: 100px;
  text-align: center;
}
.template-list-u /deep/ .el-scrollbar__wrap{
  overflow-x: hidden;
}
.template-list-u .pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: right;
}
.templateList-box-u{
  height:350px;
}
.templateList-box-drawer-u{
  height: calc(100vh - 235px);
}
.templateList-u {
  width: 100%;
  overflow: hidden;
}
.templateList-u ul, .templateList-u li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.templateList-u ul{
  margin: 0 -7px;
  display: block;
}
.templateList-u li {
  float: left;
  width: 33.33%;
  margin-bottom: 14px;
}
.templateList-u li .item {
  margin: 0 7px;
  background: #F9F9F9;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  border:1px solid #F9F9F9;
}
.templateList-u li.active .item{
  border-color:#258FFB;
}
.templateList-u li .item .img{
  background: #fff;
  height: 102px;
  overflow: hidden;
  line-height: 102px;
  text-align: center;
}
.templateList-box-drawer-u /deep/ .templateList-u li .item .img{
  height: 166px;
  line-height: 166px;
}
.templateList-u li .item .img img {
  max-width: 100%;
  max-height: 100%;
}
.templateList-u li .info {
  padding:8px 0;
}
.templateList-u li .info .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
}
.templateList-u li .opt .choose {
  float: left;
}
.templateList-u li .opt .view{
  float: right;
}
.color-main{
  cursor: pointer;
}
</style>
